<template>
	<view class="poster-box" :style="{ backgroundImage: 'url('+(backgroundImage || soccer)+')' }">
		<div class="content_item">
			<div style="display: flex;">
				<div>
					<slot></slot>
				</div>
				<div style="width: calc(100% - 70px);margin-left: 4px;">
					<div v-if="Object.keys(info.match_info_obj).length" class="gameName">
						<div>{{info.match_info_obj.competition_info.name}}</div>
						<span>{{info.match_info_obj.match_time.slice(5, 16)}}</span>
					</div>
					<div v-if="Object.keys(info.match_info_obj).length" class="name">
						<div style="text-align: right;">{{info.match_info_obj.home_team_info.team_name}}</div>
						<span class="">vs</span>
						<div>{{info.match_info_obj.away_team_info.team_name}}</div>
					</div>
					<div class="name Grid Grid--center" v-else>
						<span>{{info.match_nick}}</span>
					</div>
					<div class="money">{{info.price * 1 ? info.price : '免费'}} <text v-if="info.price * 1">元</text></div>
				</div>
			</div>
			<div class="title">{{info.title}}</div>
		</div>
	</view>
</template>

<script>
	import soccer from '@/static/images/poster/soccer-bj6-10.png'
	export default {
		name: "temp-football-10",
		props: {
			info: {
				type: Object,
				default: () => ({})
			},
			backgroundImage: {
				type: String,
				default: ''
			}
		},
		data () {
			return {
				soccer
			}
		},
		computed: {
			
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	.poster-box {
		width: 375px;
		height: 208px;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		.content_item{
			width: calc(100% - 134px);
			height: calc(100% - 28px);
			position: absolute;
    		bottom: 16px;
			left: 14px;
			div{
				text-align: left;
				color: #FFFFFF;
				font-size: 14px;
			}
			
			.gameName{
				line-height: 25px;
				display: flex;
				width: calc(100%);
				&>div{
					white-space: nowrap; /* 确保文本不会换行 */
					overflow: hidden; /* 隐藏超出容器的文本 */
					text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
					max-width: calc(100% - 80px);
				}
			}
			.name{
				line-height: 20px;
				width: 100px;
				width: calc(100%);
				display: flex;
				div{
					width: 70px;
					white-space: nowrap; /* 确保文本不会换行 */
					overflow: hidden; /* 隐藏超出容器的文本 */
					text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
					display: inline-block;
				}
				span{
					padding: 0 4px;
				}
			}
			.money{
				line-height: 28px;
				font-size: 20px;
				color: #FFF900;
				margin-bottom: 17px;
				text-align: left;
			}
		}
		.title{
			position: absolute;
			bottom: 0;
			font-size: 14px;
			text-align: left;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: normal; /* 保持正常的空白符处理 */
			color: #FFFFFF;
		}
	}
</style>